<template>
<div>
  <div class="left-main">

    <div v-for="(item,index) in leftList" class="device-ele"   :key="index" :index="index">
      <h1>本体{{item.id}}</h1>
    </div>
    <div v-for="(item,index) in copyLeftList" class="device-ele" :style="{top:`${item.y}px`}" v-drag @click="dragLeftClick"   @v-drag-end="dragLeftEnd" :key="index" :index="index">
      <h1>复制品{{item.id}}</h1>
    </div>
  </div>

  <div v-for="(item,index) in rightList" class="device-ele-right" :style="{left:`${item.x}px`,top:`${item.y}px`}" v-drag  @v-drag-end="dragRightEnd" :key="index" :index="index">
    <h1>复制品{{item.id}}</h1>
  </div>
</div>
</template>

<script>
export default {
  name: "DragPlus",
  data(){
    return {
      leftList:[
        {
          id:1
        },
        {
          id:2
        }
      ],
      //复制左边
      copyLeftList:[

      ],
      rightList:[
        {
          id:1,
          x:300,
          y:200,
        }
      ],
    }
  },
  created() {
    this.synLeftList();


  },

  mounted () {

  },
  methods:{
    //左边释放鼠标
    dragLeftEnd(e){
      let eleStyle = e.target.style;
      let y = parseInt(eleStyle.top.replaceAll("xp",""));
      let x = parseInt(eleStyle.left.replaceAll("xp",""));
      console.log("坐标:",x," ",y);
      //数组索引
      let index = e.target.getAttribute("index");
      let left = this.copyLeftList[index];
      let leftIndex = 0 ;
      for (let i = 0; i < this.leftList.length; i++) {
        if(this.leftList[i].id == left.id){
          leftIndex = i;
        }
      }
      //判断x坐标是否超过 275
      if(x >=275){
        //放置节点到右边数组
        this.rightList.push({
          id:left.id,
          x:x+25,
          y:y+(210*(leftIndex+1))+10
        })

      }

      this.synLeftList();


    },
    //左边鼠标点击
    dragLeftClick(){



    },
    //右边释放鼠标
    dragRightEnd(e){
      let eleStyle = e.target.style;
      let top = parseInt(eleStyle.top.replaceAll("xp",""));
      let left = parseInt(eleStyle.left.replaceAll("xp",""));
      console.log("坐标:",left," ",top);
      //数组索引
      let index = e.target.getAttribute("index");
      console.log(index);
      //修改数组数据
      let rightItem = this.rightList[index];
      rightItem.x = left;
      rightItem.y = top;



    },
    //同步左边列表
    synLeftList(){
      this.copyLeftList = [];
      let currentY = this.leftList.length*(-210);
      for (let i = 0; i < this.leftList.length; i++) {
        let count = 0;
        for (let j = 0; j < this.rightList.length; j++) {
          if(this.leftList[i].id == this.rightList[j].id){
            count ++;
          }
        }
        if(count >0){
          //匹配成功，不需要生成复制
          currentY-=(-210);
        }else{
          //需要生成复制
          this.copyLeftList.push({
            id:this.leftList[i].id,
            y:currentY
          });
        }

      }
    }

  }
}
</script>

<style scoped>
  .left-main{
    width: 300px;
    height: 900px;
    border: red  solid 1px;

  }
  .device-ele{
    width: 250px;
    height: 200px;
    margin: 10px auto 0 auto;
    background-image: url("../assets/img/im1.png" );
    background-size: 250px;
    background-repeat:no-repeat;
  }
  .device-ele-right{
    position:absolute;
    width: 250px;
    height: 200px;
    background-image: url("../assets/img/im1.png" );
    background-size: 250px;
    background-repeat:no-repeat;
    top: 0px;
    left: 0px;
  }
</style>